import React from 'react'
import {
    useParams,
    useLocation,
    useNavigate
} from "react-router-dom"
import {useSelector} from "react-redux"
import { Swiper, Image ,Grid,NavBar,Toast} from 'react-vant';
import withrouter from '../utlis/Hocwithrouter';

const images = [
    'https://img.yzcdn.cn/vant/apple-1.jpg',
    'https://img.yzcdn.cn/vant/apple-2.jpg',
    'https://img.yzcdn.cn/vant/apple-3.jpg',
    'https://img.yzcdn.cn/vant/apple-4.jpg',
    'https://img.yzcdn.cn/vant/apple-5.jpg',
    'https://img.yzcdn.cn/vant/apple-6.jpg',
    'https://img.yzcdn.cn/vant/apple-7.jpg',
    'https://img.yzcdn.cn/vant/apple-8.jpg',
];

function Detail({router}) {
    // console.log(router);
    // const params = useParams()
    // const location = useLocation()
    // const navigate = useNavigate()
    const list_children = useSelector((state)=>{
        return state.reducer.listChildren.filter(item=> item.id === router.params.id)
    })
    
    return (
        <div className="demo-swiper">
            <NavBar
                title="详情"
                leftText="返回"
                // rightText="按钮"
                onClickLeft={() => {
                    Toast('返回')
                    router.navigate(-1)
                }}
                // onClickRight={() => Toast('按钮')}
                />
            <Swiper>
                {images.map((image) => (
                <Swiper.Item key={image}>
                    <Image lazyload src={image} />
                </Swiper.Item>
                ))}
            </Swiper>
            {
                list_children&&list_children.length>0?list_children.map((item,index)=>{
                    return <Grid border={false} columnNum={1} key={index}>
                    <Grid.Item>
                        <Image lazyload width="100%" height="30vh" errorIcon={<div style={{ fontSize: 14 }}>加载失败</div>} src={item.img} />
                        <p>{item.itle}</p>
                        <p>价格{item.price}</p>
                        <p>数量{item.count}</p>
                    </Grid.Item>
                </Grid>
                }):"暂无数据"
            }
            
        </div>
    )
}

export default withrouter(Detail)
